<!--svg图标公用组件-->
<script setup lang="ts">
import { computed } from "vue"
// 接受父组件传递过来的参数
const props = defineProps({
  // 属性值前缀
  prefix: {
    type: String,
    default: "#icon-",
  },
  // 图标名称
  icon: {
    type: String,
    default: "",
  },
  // 图标颜色
  color: {
    type: String,
    default: "",
  },
  // 图标宽度
  width: {
    type: String,
    default: "24px",
  },
  // 图标高度
  height: {
    type: String,
    default: "24px",
  },
  // 图标类名
  className: {
    type: String,
    default: "",
  },
})
const isOnlineSvg = computed(() => /^(https?:)/.test(props.icon))
</script>

<template>
  <div
    v-if="isOnlineSvg"
    :style="{ width: width, height: height, '--svg-icon-url': `url(${icon})` }"
    class="svg-icon svg-icon-online"
    :class="className"
  />
  <svg
    v-else
    :style="{ width: width, height: height }"
    class="svg-icon"
    :class="className"
    aria-hidden="true"
  >
    <use :xlink:href="prefix + icon" :fill="color"></use>
  </svg>
</template>

<style scoped>
.svg-icon {
  fill: currentColor;
  overflow: hidden;
}

.svg-icon-online {
  background-color: currentColor;
  mask-image: var(--svg-icon-url);
  -webkit-mask-image: var(--svg-icon-url);
  mask-size: cover;
  -webkit-mask-size: cover;
  display: inline-block;
}
</style>
